<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery.easing.js"></script>
<script src="08_gallery.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}

#gallery {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -297px 0 0 -412px;
	width: 824px;
	height: 595px;
}

#image {
	width: 760px;
	height: 470px;
	margin: 0 auto;
}

#image p {
	display: none;
}

#image p img {
	width: 760px;
	height: 470px;
}

#thumbnail {
	position: relative;
	width: 824px;
	height: 95px;
	margin-top: 30px;
}

#thumbnail div {
	float: left;
}

#thumbnail .left {
	position: absolute;
	left: 0;
	top: 0;
	width: 33px;
	height: 95px;
	padding-top: 30px;
	text-align: center;
	cursor: pointer;
}

#thumbnail .right {
	position: absolute;
	right: 0;
	top: 0;
	width: 33px;
	height: 95px;
	padding-top: 30px;
	text-align: center;
	cursor: pointer;
}

#thumbnail .container {
	overflow: hidden;
	position: relative;
	left: 33px;
	width: 760px;
	height: 95px;
}

#thumbnail .container ul {
	position: absolute;
	width: 2560px;
	margin-left: -8px;
}

#thumbnail .container .thumb {
	float: left;
	width: 120px;
	height: 95px;
	margin-left: 8px;
	list-style: none;
}

#thumbnail .container .thumb.ml0 {
	margin-left: 0
}
</style>
<div id="gallery">
	<div id="image">
		<p style="display: block;">
			<img src="img/0.jpg" alt="" />
		</p>
		<p>
			<img src="img/1.jpg" alt="" />
		</p>
		<p>
			<img src="img/2.jpg" alt="" />
		</p>
		<p>
			<img src="img/3.jpg" alt="" />
		</p>
		<p>
			<img src="img/4.jpg" alt="" />
		</p>
		<p>
			<img src="img/5.jpg" alt="" />
		</p>
		<p>
			<img src="img/6.jpg" alt="" />
		</p>
		<p>
			<img src="img/7.jpg" alt="" />
		</p>
		<p>
			<img src="img/8.jpg" alt="" />
		</p>
		<p>
			<img src="img/9.jpg" alt="" />
		</p>
		<p>
			<img src="img/10.jpg" alt="" />
		</p>
		<p>
			<img src="img/11.jpg" alt="" />
		</p>
		<p>
			<img src="img/12.jpg" alt="" />
		</p>
		<p>
			<img src="img/13.jpg" alt="" />
		</p>
		<p>
			<img src="img/14.jpg" alt="" />
		</p>
		<p>
			<img src="img/15.jpg" alt="" />
		</p>
		<p>
			<img src="img/16.jpg" alt="" />
		</p>
		<p>
			<img src="img/17.jpg" alt="" />
		</p>
	</div>
	<div id="thumbnail">
		<div class="left">
			<span><img src="img/btn_left.gif" alt="이전" /></span>
		</div>

		<div class="container">
			<ul>
				<li class="thumb"><img src="img/thumb0.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb1.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb2.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb3.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb4.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb5.jpg" alt="" /></li>
				<li class="thumb ml0"><img src="img/thumb6.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb7.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb8.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb9.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb10.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb11.jpg" alt="" /></li>
				<li class="thumb ml0"><img src="img/thumb12.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb13.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb14.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb15.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb16.jpg" alt="" /></li>
				<li class="thumb"><img src="img/thumb17.jpg" alt="" /></li>
			</ul>
		</div>

		<div class="right">
			<span><img src="img/btn_right.gif" alt="다음" /></span>
		</div>
	</div>
</div>